<!-- 印章使用工单审批-->
<template>
  <view class="task-monitor-main">
    <nav-bar class="header" back title="印章使用工单审批" @goBack="goBack">
      <img slot="iconfont"
           v-if="current === 1"
           :src="iconUrl"
           alt=""
           @click="changeApprovalStatus">
      <img slot="screen" src="../../../static/img/sx.png" alt="" @click="screen">
    </nav-bar>

    <view class="header-bar">
      <ul class="menu">
        <li v-for="(item,index) in menuList" :key="index" @click="chooseMenu(item, index)">
          <view class="right-box">
            <text class="menu-num" :class="{selectmenu:index === current}">{{ item.value }}</text>
            <text class="menu-state" :class="{selectmenu:index === current}">{{ item.title }}</text>
          </view>
          <view :class="{sj:index === current}"></view>
        </li>
      </ul>
    </view>

    <view class="main-container">
      <!-- 搜索框  -->
      <view class="search">
        <van-search disabled show-action v-model="searchValue"
                    left-icon="" action-text="重置"
                    right-icon="search" placeholder="搜索"
                    @click="showSearch=true" @cancel="onSearch('')" />
      </view>
      <view
          :class="isChoosable ? 'task-list-container': 'task-list-container task-list-container-not-submit'"
          v-if="approvalList.length > 0"
      >
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list
              v-model="isLoading"
              :finished="finished"
              finished-text="没有更多了"
              @load="loadMore"
          >
            <!-- 列表循环   -->
            <view class="task-list" v-for="(item,index) in approvalList" :key="index" @click="jump(item)">
              <view class="task-top">
                <van-checkbox @click.self="clickCheckBox" style="margin-right: 5px;" v-if="isChoosable" v-model="item.isChecked" />
                <text class="equip-title">{{ item.ORIGINATOR_NAME }}发起的 {{item.NAME }} </text>
                <!--  0-待审批 2 审批通过  1 审批拒绝 -->
                <text  class="equip-state-zxz" v-if="item.STATE === '0'">
                 {{item.STATENAME}}
                </text>
                <text class="equip-state-wzx" v-else-if="item.STATE === '2'">
                  {{item.STATENAME}}
                </text>
                <text class="equip-state-wc" v-else-if="item.STATE === '1'">
                   {{item.STATENAME}}
                </text>
              </view>
              <hr class="patrol-hr">
              <ul class="task-list-main">
                <li>
                  <text class="task-title">班组名称：</text>
                  <text class="task-titles">{{ item.REMARK }}</text>
                </li>
                <li>
                  <text class="task-title">发起时间：</text>
                  <text class="task-titles">{{ item.TIME }}</text>
                </li>
              </ul>
            </view>
          </van-list>
        </van-pull-refresh>
      </view>

      <view v-if="isChoosable" class="submit-wrap" >
        <van-button block native-type="submit" @click="goApproval">审批</van-button>
      </view>
    </view>
    <!--弹出搜索页-->
    <van-popup v-model="showSearch" position="right">
      <search-equ-match @cancel="showSearch = false;" @search="onSearch" />
    </van-popup>
    <screenPopup :showScreen="showScreen" @closePopup="showScreen=false"
                 @confirm="confirmCondition" @reset="reset" :otherList="otherList" :typeList="typeList">
    </screenPopup>
    <!-- 弹出审批页 -->
    <van-popup
        closeable
        :close-on-click-overlay="false"
        v-model="showApproval"
        position="bottom"
    >
      <Approval @submitApproval="examineSeal"></Approval>
    </van-popup>

  </view>
</template>

<script>
import navBar from "../../../components/common/nav-bar";
import searchEquMatch from '../../common/searchEquMatch'
import plateTitle from '../../../components/business/plateTitle.vue';
import Approval from '../../common/approval.vue'
import {mapGetters} from "vuex";
import moment from "moment";
import {Dialog} from "vant";
import screenPopup from "../common/screenPopup2.vue";

export default {
  name: "taskMonitor",
  components: {navBar, searchEquMatch, plateTitle, Approval,screenPopup},
  data() {
    return {
      iconUrl: require("../../../static/img/batch.png"),
      searchValue: "",
      showSearch: false,
      approvalList:[],
      refreshing: false, // 是否正在刷新
      isLoading: false,
      finished: false,
      total: 0, // 总条数
      approvalPage: 1,
      approvalLimit:20,
      current: 0, // 当前选中的任务类型tab
      menuList: [
        {
          title:'全部',
          value:'0'
        },
        {
          title:'待审批',
          value:'1'
        },
        {
          title:'审批通过',
          value:'2'
        },
        {
          title:'审批拒绝',
          value:'3'
        }
      ], // tab切换的列表
      currrentTaskState: '', // 当前选中的任务类型（供请求使用），默认为全部
      isChoosable: false, // 是否可进行选择
      showApproval: false, // 展示审批弹窗
      typeList: [
        {
          TITLE: '本周',
          VALUE: 1,
        },
        {
          TITLE: '本月',
          VALUE: 2,
        },
        {
          TITLE: '上月',
          VALUE: 3,
        }
      ],
      otherList:[
        {
          TITLE:'按天',
        },
        {
          TITLE:'按月',
        }
      ],
      showScreen: false,
      timeType:1,
      startTime:'',
      endTime:'',
    };
  },
  onLoad() {
    this.getSealList();
  },
  computed:{
    ...mapGetters(['userData', 'roleAuth']),
  },
  methods: {
    //  筛选弹框
    screen() {
      this.showScreen = true;
    },
    confirmCondition(selected,startTime,endTime) {
	    this.timeType = selected;
	    this.startTime = startTime;
	    this.endTime = endTime;
      this.onRefresh()
    },
	  reset(selected,startTime,endTime){
		  this.timeType = selected;
		  this.startTime = startTime;
		  this.endTime = endTime;
		  this.onRefresh()
	  },
    clickCheckBox () {
        
    },
    goApproval () {

      let checkedTask = this.approvalList.filter(item => item.isChecked);
      if (checkedTask.length === 0) return;

      this.showApproval = true;
    },
    examineSeal ({radio, determineResult}) { // 审批组件点击确认事件
      let params = {
        "userId":  this.userData.USERID, // 是	string	登录用户ID
        "username":  this.userData.SUERNAME, // 是	string	登录用户名称
        "roleId": this.userData.roleId, // 是	string	登录用户权限ID
        "state": radio,
        "explain": determineResult,
        "ids": this.approvalList.reduce((prev, item) => {
          if (item.isChecked) {
            prev.push(item.ID)
          }

          return prev;
        }, []),
      }

      this.$api.examineSeal(params).then(res => {
        if (res.code === 0) {
          Dialog.alert({
            message: "审批成功"
          }).then(() => {
            this.showApproval = false;
            this.onRefresh();
          });
        }
      })
    },
    changeApprovalStatus () {
      if (!this.isChoosable) {
        this.isChoosable = true;
        this.iconUrl = require('../../../static/img/cancel.png');
        // this.chooseText = "取消"
      } else {
        this.isChoosable = false;
        this.iconUrl = require('../../../static/img/batch.png');
        // this.chooseText = "批量审批"
      }
    },
    chooseMenu(item, index) {
      this.current = index
      this.currrentTaskState = item.taskState;
      this.iconUrl = require('../../../static/img/batch.png');
      // this.chooseText = '批量审批';
      this.isChoosable = false;
      this.onRefresh()
    },
    // 获取审批列表
    getSealList() {
		  
      let params = {
		    state:this.current !== 0?String(this.current-1):'',
        userId: this.userData.USERID, // 是	string	登录用户ID
        timeType:this.timeType,
        startTime:this.startTime,
        endTime:this.endTime,
        name: this.searchValue,    // 否	string	任务名称
        limit: this.approvalLimit,  // 否	string	分页条数 不传查全部
        page: this.approvalPage,    // 否	string	分页页数 不传查全部
      }
      this.$api.getSealList(params).then(res => {
        this.isLoading = false;
        this.refreshing = false;
		this.approvalList = this.approvalList.concat(res.data.resList.map((item)=>{
			return {
				TIME:item.CREATE_TIME ? moment(item.CREATE_TIME).format('YYYY-MM-DD HH:mm') : '',
				isChecked: false,
				...item
			}
		}))
		  

		this.menuList = [
        {
          title:'全部',
          value:res.data.count.total
        },
        {
          title:'待审批',
          value:res.data.count.pending
        },
        {
          title:'审批通过',
          value:res.data.count.pass
        },
        {
          title:'审批拒绝',
          value:res.data.count.fail
        }
      ]

      })
    },

    onRefresh() {
      this.refreshing = true;
      this.finished = false;
      this.approvalPage = 1;
      this.approvalList = [];
      this.getSealList();
    },
    loadMore() {
      if (this.total > this.approvalList.length) {
        this.approvalPage = this.approvalPage + 1;
        this.getSealList();
      } else {
        this.finished = true;
      }
    },
    onSearch(searchValue) {
      this.searchValue = searchValue;
      this.onRefresh();
      this.showSearch = false;
    },
    goBack() {
      uni.navigateTo({
        url: '/pages/operationApprove/index/index'
      })
    },
    jump(item) {
      if (this.isChoosable) return; // 如果目前处于批量状态，则不能单个审批
      uni.navigateTo({
        url: `/pages/operationApprove/sealApproval/sealDetailsProvinice?id=${item.ID}`
      });
    }
  }
};
</script>

<style scoped lang="scss">
.task-monitor-main {
  min-height: 100vh;
  background: #F2F6FA;

  .header {
    position: sticky;
    top: 0;
    .icon-ic-wrap {
      width: px2vw(48);
      height: px2vw(48);
    }
    img {
      width: px2vw(48);
      margin-right: px2vw(40);
    }

    .header-right {
      display: flex;

      /deep/ .van-icon {
        font-size: px2vw(52);
        font-weight: bold;
      }

      /deep/ .van-icon-scan {
        margin-right: px2vw(12);
      }

      /deep/ .van-icon-filter-o {
        margin-left: px2vw(12);
      }
    }
  }

  .header-bar {
    height: px2vh(120);
    border-radius: 0 0 px2vh(40) px2vh(40);
    background: #417ADC;
    margin-bottom: px2vh(130);
    .menu {
      width: px2vw(1020);
      height: px2vh(220);
      background-image: url('../../../static/img/borderR.png');
      background-size: px2vw(1020) px2vh(220);
      //margin-left: px2vw(30);
      margin: 0 auto;
      display: flex;
      justify-content: space-evenly;
      li {
        //width: calc(1 * (100% - #{px2vw(400)}) / 4);
        height: 100%;
        //margin-left: px2vw(80);
        //float: left;
        position: relative;
        .right-box {
          height: px2vh(112);
          //margin-left:px2vw(10);
          float: left;
          margin-top: px2vh(59);
          text-align: center;
          .menu-num {
            display: block;
            font-size: px2vw(54);
            font-weight: bold;
            color: #333;
          }
          .menu-state {
            font-size: px2vw(36);
            color: #333;
          }
          .selectmenu {
            color: #417ADC;
          }
        }
        .sj {
          width: px2vw(78);
          height: px2vh(66);
          position: absolute;
          bottom: px2vh(-34);
          //right: px2vw(40);
          left: 50%;
          transform: translateX(-50%);
          background-image: url('../../../static/img/sj.png');
          background-size: px2vw(78) px2vh(66);
        }
      }
    }
  }

  .main-container {
    height: calc(100vh - #{px2vh(413)});
    position: relative;
    .submit-wrap {
      width: calc(100vw - #{px2vw(60)});
      padding: px2vh(0) px2vw(30);
      text-align: center;
      position: fixed;
      bottom: 20px;

      /deep/ .van-button {
        width: 100%;
        height: px2vh(120);
        color: #fff;
        background-color: #417ADC;
        border: 1px solid #417ADC;
        border-radius: px2vh(60);
      }
    }

    .search {
      width: px2vw(1020);
      height: 38px;
      margin: px2vw(30) px2vh(30);
      border-radius: px2vw(20);
      overflow: hidden;

      .van-search {
        padding: 0 0;
        height: 38px;
      }

      .van-search__content {
        background: #fff;
        height: 38px;
      }

      /deep/ .van-field__control {
        height: 30px;
      }
    }

    .screen-type-item {
      margin-bottom: px2vh(30);

      .plate-title {
        margin-bottom: px2vh(36);
      }

      .screen-option-container {
        display: flex;
        //justify-content: space-between;
        flex-wrap: wrap;

        .screen-option-item {
          width: px2vw(260);
          height: px2vh(90);
          margin-bottom: px2vh(20);
          line-height: px2vh(90);
          background: #f7f7f7;
          color: #666;
          font-size: px2vh(36);
          text-align: center;
          border-radius: $border-radius-base;
        }
        .screen-option-item:not(:nth-child(3n)) {
          margin-right: px2vw(20);
        }

        .screen-option-item.active {
          background: #ecf1fb;
          color: #417ADC;
        }
      }
    }

    .task-list-container {
      height: calc(100vh - #{px2vh(443)} - 38px - #{px2vh(165)});
      overflow: auto;
      position: relative;
      &.task-list-container-not-submit {
        height: calc(100vh - #{px2vh(443)} - 38px);
      }
      .task-list {
        width: px2vw(1020);
        padding-bottom: px2vh(30);
        //min-height: px2vh(416);
        //padding-bottom: px2vh(20);
        background: #fff;
        border-radius: px2vw(20) px2vh(20);
        margin-top: px2vh(30);
        margin-left: px2vw(30);
        margin-bottom: px2vh(30);
        .task-top {
          width: calc(100% - #{px2vw(80)});
          margin-left: px2vw(40);
          height: px2vh(140);
          display: flex;
          img {
            width: px2vw(64);
            height: px2vw(64);
            margin-top: px2vh(40);
            float: left;
          }
          .equip-title {
            color: #333;
            font-size: px2vw(48);
            width: px2vw(670);
            height: px2vh(48);
            line-height: px2vh(48);
            float: left;
            white-space:nowrap;
            overflow:hidden;
            text-overflow:ellipsis;
            margin-top: px2vh(48);
            margin-left: px2vw(25);
          }
          .equip-state-wc,.equip-state-wzx, .equip-state-zxz {
            display: flex;
            justify-content: center;
            align-items: center;
            width: px2vw(150);
            height: px2vh(50);
            font-size: px2vw(32);
            border-radius: px2vw(10);
            margin-top: px2vh(48);
            margin-left: px2vw(27);
            float: left;
			line-height: px2vh(50);
            //text-align:center;
          }
          .equip-state-wc {
            color: #FF7070;
            background: rgba(255,112,112,0.1);
          }
          .equip-state-wzx {
            color: #3CDA68;
            background: rgba(62,218,104,0.1);

          }
          .equip-state-zxz {
            color: #FFAD0E;
            background: rgba(255,180,0,0.1);
          }
        }
        .patrol-hr {
          width: px2vw(940);
          border: px2vh(1) solid #e5e5e5;
          margin-left: px2vw(40);
        }
      }

      .task-list-main {
        width: px2vw(940);
        //height: px2vh(266);
        margin-left: px2vw(40);
        padding-bottom: px2vh(30);
        li {
          margin-top: px2vh(30);
          font-size: px2vw(36);
          .task-title {
            color: #666;
          }
          .task-titles {
            color: #333;
          }
        }
      }

      .task-hr {
        width: px2vw(940);
        border: 0;
        border-bottom: px2vh(6) dashed #e5e5e5;
        margin-top: px2vh(14);
        margin-left: px2vw(40);
      }
      .by {
        position: absolute;
        width: px2vw(40);
        height: px2vh(40);
        border-radius: px2vw(100);
        left: px2vw(12);
        float: left;
        background: #f2f6fa;
      }
      .byr {
        position: absolute;
        width: px2vw(40);
        height: px2vh(40);
        border-radius: px2vw(100);
        right: px2vw(12);
        float: right;
        background: #f2f6fa;
      }
      .bottom-patrol {
        width: px2vw(940);
        height: px2vh(54);
        margin-left: px2vw(40);
        margin-top: px2vh(26);
        font-size: px2vw(32);
        .left-bottom-patrol {
          display: flex;
          justify-content: center;
          align-items: center;
          min-width: px2vw(300);
          padding: 2px 4px;
          //height: px2vh(54);
          background: #ecf1fb;
          float: left;
          text-align: center;
          color: #417adc;
          border-radius: px2vw(8);
        }
        .right-bottom-patrol {
          width: px2vw(120);
          height: px2vh(54);
          float: right;
          .patrol-btn {
            width: px2vw(120);
            height: px2vh(54);
            background: #417adc;
            float: right;
            //border-radius: px2vw(20);
          }
          /deep/.van-button--normal {
            padding: 0;
          }
        }
      }
    }
  }
}

</style>
